<template>
  <a-table
    ref="arud"
    v-model="searchForm"
    v-model:form="form"
    :data="tableData"
    :option="options"
    :total="total"
    :pageSizes="[20, 40]"
    :hasRequest="hasRequest"
    v-model:page="searchFormPage.page"
    v-model:limit="searchFormPage.pageSize"
    @row-save="rowSave"
    @handleSelectionChange="handleSelectionChange"
    @on-load="getTtsList"
    @pagination="getTtsList"
  >
  </a-table>
</template>

<script lang="ts" setup>
import ATable from "@/components/aTable";
const arud = ref();
const searchForm = ref({
  name: "2",
});
const searchFormPage = ref({
  page: 1,
  pageSize: 20,
});

const form = ref({});
const total = ref(0);
const hasRequest = ref(false);
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const options = computed(() => {
  return {
    stripe: false, // 表格状态
    border: false, // 表格边框
    index: false, // 显隐序号true|false
    indexSort: false, // 切换分页+1页序号true|false
    indexWidth: 70, // 序号宽度
    indexLabel: "序号", // 序号文字
    indexAlign: "left", // 序号位置
    height: 180,
    maxheight: 200,
    header: false, // 头部按钮显隐 true|false
    addBtn: true, // 新增按钮 true|false
    cancelBtn: true, // 弹窗取消按钮 true | false
    confirmBtn: true, // 新增弹窗确认按钮 true | false
    editBtn: true, // 修改弹窗确认按钮 true | false
    formLabelWidth: 80, // 表单label宽度 不传默认80
    formLabelPosition: "right", // 调整form组件文字位置 left|top|right
    labelWidthSpan: 12, // form组件单个宽度 不传默认8
    // modalWidth: 1200, // 弹窗宽度
    columns: [
      {
        label: "name",
        prop: "name",
        hide: false, // 状态为true表格栏隐藏, 默认显示
        search: true,
        multiple: false, // 开启多选 true|false
        type: "select", // 指定form表单的当前组件的状态
        dicData: [
          { label: "joon", value: "1" },
          { label: "jack", value: "2" },
        ],
        // [{label: '', value: ''}] 固定的数组示例
        placeholder: "请选择",
      },
      {
        label: "date",
        prop: "date",
        searchType: "date", // 定义搜索组件的类型
        type: "date", // 定义表单组件的类型
        placeholder: "请选择",
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "address",
        prop: "address",
        hide: false, // 状态为true表格栏隐藏, 默认显示
        searchType: "input", // 定义搜索组件的类型
        placeholder: "请输入", // 占位符
      },
    ],
  };
});

// 新增
function rowSave(row, done) {
  console.log("新增", row);
  done();
}

// 初始化
function getTtsList() {
  // xxx()
  //   .then((res) => {})
  //   .catch((err) => {})
  //   .finally(() => {
  //     hasRequest.value = true;
  //   });
}
</script>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>
